<template>
	<view class="container">
		<!-- <image src="../../static/image/back.png" class="back" @click="back"></image> -->
		<image src="../../static/image/goodImg.png" style="width: 100%;height: 526rpx;vertical-align:bottom"></image>
		<view class="bar">
			<image src="../../static/image/logo-1.png" style="width: 155rpx;height: 31rpx;"></image>
			<image src="../../static/image/good-sign.png" style="width: 418rpx;height: 21rpx;margin-left: 47rpx;"></image>
		</view>
		<view class="content">
			<view class="message">
				<view class="price">
					<span style="font-size: 36rpx;color: #F43E56;margin-right: 10rpx;">￥299</span>
					<span style="font-size: 24rpx;">/盒</span>
					<span style="font-size: 20rpx;color: #999999;text-decoration:line-through;margin-left: 40rpx;">￥369</span>
					<span style="font-size: 20rpx;color: #999999;float: right;">126 人已下单</span>
				</view>
				<view class="" style="font-size: 24rpx;font-weight: bold;">
					ROYCE'若翼族生巧克力日本北海道进口零食抹茶味生巧礼盒装送 女生
				</view>
				<view class="" style="font-size: 20rpx;color: #999999; font-weight: 500;margin: 28rpx 0;">
					<span >欣华夏商城优选商品  原厂精品</span>
					<span style="float: right;">配送费：￥200</span>
				</view>
			</view>
		</view>
		<view class="bgc">
			<view class="distribution">
				<span style="margin-right: 35rpx;">配送</span>
				<span>16：00前下单，最快次日达，预计1-2日达</span>
			</view>
		</view>
		<view class="content">
			<view class="title">商品详情</view>
			<view class="detail">
				<view class="row">
					<span style="color: #999999;">产地</span>
					<span style="position: absolute;left: 200rpx;">中国</span>
				</view>
				<view class="row">
					<span style="color: #999999;">规格</span>
					<span style="position: absolute;left: 200rpx;">1盒</span>
				</view>
				<view class="row">
					<span style="color: #999999;">重量</span>
					<span style="position: absolute;left: 200rpx;">50kg</span>
				</view>
				<view class="row">
					<span style="color: #999999;">包装</span>
					<span style="position: absolute;left: 200rpx;">盒</span>
				</view>
				<view class="row">
					<span style="color: #999999;">保质期</span>
					<span style="position: absolute;left: 200rpx;">盒</span>
				</view>
			</view>
			<image src="../../static/image/goodImg-1.png" style="width: 100%; height: 794rpx;margin: 18rpx 0;"></image>
			<image src="../../static/image/goodImg-2.png" style="width: 100%; height: 794rpx;"></image>
		</view>
		<view class="tabbar">
			<view class="icon">
				<view class="block">
					<view class="num">
						3
					</view>
				</view>
			</view>
			<view class="box">
				<view class="goods-price">
					￥298
				</view>
				<view class="dispatching-price">
					配送费：￥5
				</view>
			</view>
			<view class="button">
				<view class="btn" style="background-color: #FB8A9F;border-radius: 8px 0px 0px 8px;">加入购物车</view>
				<navigator class="btn" url="../order/order" style="background-color: #F70633;border-radius: 0px 8px 8px 0px;">立即购买</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
			}
		},
		methods:{
			// back(){
			// 	uni.navigateBack()
			// }
		},
		onShow() {
			
		},
	}
</script>

<style>
	*{
		margin: 0;
		padding: 0;
	}
	/* .back{
		width: 23rpx;
		height: 41rpx;
		position: absolute;
		top: 27rpx;
		left: 23rpx;
		z-index: 10;
	} */
	.bar{
		height: 60rpx;
		line-height: 60rpx;
		padding-left: 16rpx;
		background: linear-gradient(92deg, rgba(244, 22, 64, 0.77), rgba(238, 79, 105, 0.77));
	}
	.content{
		width: 95%;
		margin: 0 auto;
	}
	.price{
		margin: 34rpx 0;
	}
	.bgc{
		background-color: #F5F5F5;
		font-size: 20rpx;
		font-weight: bold;
		padding: 15rpx 0;
	}
	.distribution{
		padding-left: 20rpx;
		line-height: 58rpx;
		background-color: #FFFFFF;
	}
	.title{
		font-size: 24rpx;
		font-weight: bold;
		margin: 27rpx 0;
	}
	.detail{
		border: 2rpx solid #E6E6E6;
	}
	.row{
		line-height: 78rpx;
		font-size: 20rpx;
		font-weight: bold;
		padding: 0 36rpx;
		border-bottom: 1rpx solid #E6E6E6;
	}
	.tabbar{
		width: 100%;
		height: 108rpx;
		/* margin: 18rpx 0; */
		display: flex;
		position: fixed;
		bottom: 0;
		background-color: #FFFFFF;
		/* background-image: url(../../static/image/tabbar-bg.png); */
	}
	.icon{
		width: 132rpx;
		height: 108rpx;
		margin-left: 27rpx;
		position: relative;
		background-image: url(../../static/image/tabbar-icon.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.block{
		width: 27rpx;
		height: 27rpx;
		position: absolute;
		top: 20rpx;
		left: 80rpx;
		background: #F70634;
		border-radius: 50%;
	}
	.num{
		text-align: center;
		font-size: 20rpx;
		font-weight: 400;
		color: #FFFFFF;
	}
	.box{
		margin: 15rpx 23rpx;
	}
	.goods-price{
		font-size: 30rpx;
		font-weight: bold;
		color: #F70633;
		margin-bottom: 18rpx;
	}
	.dispatching-price{
		font-size: 20rpx;
		font-weight: 400;
		color: #CCCCCC;
		font-weight: bold;
	}
	.button{
		display: flex;
		margin: 20rpx 0;
		position: absolute;
		right: 29rpx;
	}
	.btn{
		width: 190rpx;
		height: 81rpx;
		line-height: 81rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 24rpx;
		font-weight: bold;
	}
</style>
